<template>
  <div class="wrap">
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:2.3rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <p class="back"  @click="back"><img src="../../assets/img/zuojiantou.png" alt=""></p>
    </div>
    <div class="cantuan">
      <div class="ct_left">
        <div class="ct_l">
          <div class="ct_left1"><span>￥</span>{{shopInfo.price}}</div>
          <div class="ct_left2"><p>原价<span>￥{{shopInfo.original_price}}</span></p><p>3人团</p></div>
        </div>
        <div class="ct_left3">全民团</div>
      </div>
      <div class="ct_right">
        <p>距结束还剩</p>
        <div class="ct_right1"><p><van-count-down :time="time" /></p></div>
      </div>
    </div>
    <!--  详情  -->
    <div class="infoWrap">
      <div class="infoName">
        <img src="../../../static/img/jx.png" alt=""><p>{{shopInfo.title}}</p>
      </div>
      <div class="infoDetails">{{shopInfo.content}}</div>
    </div>

    <!-- 规格选择  -->
    <div class="guige">
      <div class="gg_1">
        <img src="../../../static/img/qmt.png" alt="">
        <p>开团后新老客户都可参团</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="ggShow">
        <p>已选</p>
        <p><span v-for="x in arr" style="color: #575757">{{x}}&nbsp;&nbsp;</span></p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="isShow('show1')">
        <p>配送</p>
        <p style="color: #575757">{{sel1}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
    </div>
    <!--  拼团进度  -->
    <div class="speed">
      <div class="speed-title">
        <div>拼团玩法 <p></p><p></p></div>
      </div>
      <div class="speed-steps">
        <div class="line">
          <div class="line-left"></div>
          <div class="line-right"></div>
          <p style="left: 0">1</p>
          <p style="left: 30%">2</p>
          <p style="left: 62%">3</p>
          <p style="right: 0">4</p>
          <div class="ms" style="left: -.15rem;color: #FF7611"><span>选择商品</span><span>完成下单</span></div>
          <div class="ms" style="left: 25%"><span>支付开团</span><span>或参团</span></div>
          <div class="ms" style="left: 57%"><span>邀请好友</span><span>参团支付</span></div>
          <div class="ms" style="right: -.15rem"><span>拼团成功</span><span>失败退款</span></div>
        </div>
      </div>
    </div>

    <!--  评论  -->
    <div class="commentWrap">
      <div class="comment-tit">
        <div><p></p><p>商品评价(26)</p></div>
        <p @click="jump('CommodityEvaluation')"><span>查看全部</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
      </div>

      <div class="comment-box" >
        <div class="comment-box-top">
          <div class="comment-box-img">
            <img src="../../../static/img/uhead.jpg" alt="">
            <div class="comment-box-name">
              <span>代码搬运工</span>
              <div class="star">
                <van-rate allow-half v-model="9.5/2" readonly color="#FF7005" />
              </div>
            </div>
          </div>
          <div class="comment-box-time">
            <p>04-30 14:43</p>
          </div>
        </div>
        <div class="comment-box-info" @click="jump('CommentDetails')">
          这个蛋糕真的超级好吃，香甜细腻，这个味的真的不要太好
          吃！！一定要试试！！
        </div>
        <div class="comment-img" @click="jump('CommentDetails')">
          <img src="../../../static/img/es1.png" alt="">
          <img src="../../../static/img/es2.png" alt="">
          <img src="../../../static/img/es3.png" alt="">
        </div>
        <div class="comment-box-icon">
          <p>口味5星/包装5星/配送满意</p>
          <div>
            <p @click="thisComment=!thisComment"><img :src="thisComment?'../../../static/img/tz1ed.png':'../../../static/img/tz1.png'" alt=""><span>356</span></p>
            <p><img src="../../../static/img/tz2.png" alt=""><span>356</span></p>
          </div>
        </div>
      </div>
    </div>

    <!--  宝贝详细信息  -->
    <div class="details">
        <div>宝贝详情</div>
        <div class="detailsInfo">
            <p>该商品暂无详情</p>
        </div>
    </div>

    <footer>
      <div class="foot_2" @click="order('alone')">单独购买</div>
<!--      <div class="foot_3" @click="jump('ptDetails')">一键开团</div>-->
      <div class="foot_3" @click="order('groupon')">一键开团</div>
    </footer>

    <!--  选择支付  -->
    <van-popup v-model="look" class="fkPopup">
      <div class="fkbox">
        <div class="fktit">{{shopInfo.title}}</div>
        <div class="fkitem" v-for="(item1,y1) in Specifications">
          <p>{{item1.name}}</p>
          <div>
            <p v-for="(x,y) in item1.content" :class="x.name==arr[y1]?'selected':''" @click="selGG(y1,y,x.id)">
              {{x.name}}</p>
          </div>
        </div>
        <div class="fkNum">
          <p>数量</p>
          <van-stepper v-model="value" theme="round" button-size="22" min="1" max="99"  @change="selectNum" disable-input />
        </div>
        <div class="yxguige">
          <p>已选规格：</p>
          <p><span v-for="x in arr">{{x}}&nbsp;&nbsp;</span>&ensp;x&ensp;{{value}}</p>
        </div>
        <div class="guifoot">
          <p><span>￥</span>{{price}}</p>
          <p @click="closeGuiGe">确定</p>
        </div>
        <p style="height: .01rem;width:100%;"></p>
      </div>
    </van-popup>

    <van-action-sheet
      v-model="show1"
      :actions="actions"
      description="配送方式"
      @select="onSelect"
    />
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import { ActionSheet,popup,CountDown  } from 'vant';

  Vue.use(CountDown);
  Vue.use(ActionSheet);
  Vue.use(popup);
  export default {
    name: "groupDetails",
    data() {
      return {
        time:0,
        nowTime:0,
        start:false,//拼团是否开始
        lunbolist:[],
        title:"",
        shopInfo:[], // 商品详情
        Specifications:[], // 商品规格
        arr: [], // 当前已选规格
        price:0, // 当前商品价格
        SpecificationsPrice:[], // 当前商品规格价格列表
        activity_goods_sku_price:[], // 当前活动商品规格价格列表
        SpecificationsIndex:[], // 当前商品子规格ID
        SpecificationsId:0, // 选中商品规格ID
        SpecificationsIdPrice:"0", // 选中商品规格ID对应的价格
        look: false,
        show1: false,
        sel1: '外卖配送',
        actions: [
          {name: '到店自取'},
          {name: '外卖配送'},
        ],
        thisComment:false, // 当前是否点赞
        value:1
      }
    },
    created() {
      // 获取服务器时间戳
      this.$myAxios('api/index/getTime','get',{}).then(res=>{
        if (res.data.code == 1) {
          this.nowTime = res.data.time;
          console.log(this.nowTime);
        }
      });
      if(this.$route.query.id){
        // 请求商品数据
        this.$myAxios('addons/shopro/goods/detail','get',{
          id:this.$route.query.id
        }).then( res=>{
          console.log(res.data.data);
          this.lunbolist = res.data.data.images;
          this.shopInfo = res.data.data;
          this.Specifications = res.data.data.sku;
          this.SpecificationsPrice = res.data.data.sku_price;
          this.price = this.SpecificationsPrice[0].price * 1;
          this.SpecificationsIndex = this.SpecificationsPrice[0].goods_sku_ids.split(',');
          this.SpecificationsId = this.SpecificationsPrice[0].id;
          if(this.nowTime>=res.data.data.activity.starttime){
            if(this.nowTime <= res.data.data.activity.endtime){
              this.time = (res.data.data.activity.endtime - this.nowTime)*1000
            }else {
              this.$myNotice("活动已结束");
            }
          }else {
            this.$myNotice("活动还未开始");
          }
          // 预定义规格选择
          for (var i of res.data.data.sku) {
            this.arr.push(i.content[0].name)
          }
        })
      }else{
        this.$myNotice(res.data.msg,2000);
      }
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        observer:true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay:{
          delay:3000
        }
      });
    },
    methods: {
      back() {
        this.$router.back();
      },
      jump(page) {
        this.$router.push({
          name: page
        })
      },
      order(buy_type){
        console.log(this.$store.state.userInfo.token_lt);
        let goods_list = [{
          goods_id:this.$route.query.id,
          goods_num:this.value,
          sku_price_id:this.SpecificationsId,
          goods_price:this.SpecificationsIdPrice
        }];
        this.$myAxios('addons/shopro/order/pre','post',{
          address_id:0,
          buy_type:buy_type,
          coupons_id:0,
          dispatch_type:"express",
          from:"goods",
          groupon_id:0,
          goods_list:JSON.stringify(goods_list),
          order_type:"goods",
          token:this.$store.state.userInfo.token_lt,
          remark:"开团"
        }).then( res=>{
          console.log(res.data.code);
          if(res.data.code == 1){
            this.$router.push({
              name: 'groupOrder',
              query:{data:JSON.stringify(res.data.data)}
            })
          }else{
            this.$myNotice(res.data.msg,2000);
          }
        })
      },
      closeGuiGe(){
        this.look = false;
      },
      ggShow(){
        this.look = true;
      },
      selGG(y1,y,id) {
        var arr = [...this.arr];
        arr[y1] = this.Specifications[y1].content[y].name;
        this.arr = arr;
        this.SpecificationsIndex[y1] = id;
        // 计算价格
        for (var i of this.SpecificationsPrice) {
          if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
            this.SpecificationsId = i.id;
            // for(let y =0;y<this.activity_goods_sku_price.length;y++){
            //   if(this.activity_goods_sku_price[y].sku_price_id == i.id){
            //     this.SpecificationsId = this.activity_goods_sku_price[y].id;
            //     this.SpecificationsIdPrice = this.activity_goods_sku_price[y].price;
            //     this.price = this.activity_goods_sku_price[y].price*this.value;
            //   }
            // }
            console.log('选择变了',this.price);
            break;
          }
        }
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show1 = false;
        this.sel1 = item.name;
      },
      isShow(res) {
        this[res] = true;
      },
      selectNum(value){
        // 计算价格
        for (var i of this.SpecificationsPrice) {
          if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
            this.price = i.price * this.value;
            console.log('数量变了',this.price)
            break;
          }
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #F5F5F5;
    min-height: 6.17rem;
    padding-bottom: .5rem;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  .back {
    width: .2rem;
    height: .25rem;
    position: fixed;
    top: .15rem;
    left: .13rem;
    text-align: center;
    z-index: 999;
  }
  .back>img {
    width: .1rem;
    height: .17rem;
  }

  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

  .cantuan {
    width: 100%;
    height: .55rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_left {
    height: 100%;
    width: 2.75rem;
    background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_right {
    width: 1rem;
    height: 100%;
    background: rgba(255, 191, 37, 1);
    box-shadow: 0 .01rem 0 0 rgba(219, 219, 219, 1);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .ct_l {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 70%;
    box-sizing: border-box;
    padding-left: .1rem;

  }

  .ct_left1 {
    max-width: 60%;
    color: #ffffff;
    font-size: .41rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .ct_left1 > span {
    font-size: .2rem;
  }

  .ct_left2 {
    color: #ffffff;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-left: .05rem;
  }

  .ct_left2 > p:nth-child(1) {
    margin-bottom: .05rem;
  }

  .ct_left2 > p:nth-child(1) > span:nth-child(1) {
    text-decoration: line-through;
  }

  .ct_left2 > p:nth-child(2) {
    width: .38rem;
    height: .17rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .02rem;
    color: #FF7611;
    font-size: .11rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .17rem;
  }

  .ct_left3 {
    color: #ffffff;
    font-size: .24rem;
    font-family: PingFang SC;
    font-weight: 500;
    max-width: 40%;
    text-align: center;
  }

  .ct_right > p:nth-child(1) {
    color: #FF7611;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-bottom: .05rem;
  }

  .ct_right1 {
    color: #FF7611;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_right1 > p {
    /*width: .14rem;*/
    /*height: .14rem;*/
    background: rgba(255, 118, 17, 1);
    border-radius: .02rem;
    padding: 0 .05rem;
    color: #ffffff;
    text-align: center;
    line-height: .14rem;
  }
  >>>.van-count-down{
    color: #ffffff;
    font-size: .12rem;
  }
  .infoWrap {
    width: 100%;
    max-height: .8rem;
    box-sizing: border-box;
    padding: .1rem .15rem .1rem .15rem;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }

  .infoName {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .03rem;
  }

  .infoName > img:nth-child(1) {
    width: .37rem;
    height: .14rem;
    margin-right: .1rem;
  }

  .infoName > p:nth-child(2) {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .infoDetails {
    width: 100%;
    box-sizing: border-box;
    padding-right: .2rem;
    font-size: .13rem;
    line-height: .19rem;
    color: #A7A7A7;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /*  规格 */
  .guige {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 .15rem;
    margin-bottom: .1rem;
  }

  .guige > div {
    height: .5rem;
    border-bottom: .01rem solid #F8F8F8;
  }

  .guige > div:nth-last-child(1) {
    border: none;
  }

  .gg_1, .gg_2 {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .gg_1 > img:nth-child(1) {
    width: .6rem;
    height: .25rem;
    margin-right: .1rem;
  }

  .gg_1 > p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .gg_1 > img:nth-child(3), .gg_2 > img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }

  .gg_2 {
    color: #919191;
  }

  .gg_2 > p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
  }

  .gg_2 > p:nth-child(1) {
    margin-right: .15rem;
  }

  .speed {
    background-color: #ffffff;
    min-height: 1.3rem;
  }

  .speed-title {
    width: 100%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
  }

  .speed-title > div > p {
    width: 1rem;
    height: .01rem;
    background-color: #E5E5E5;
    position: absolute;
  }

  .speed-title > div > p:nth-child(1) {
    left: -1rem;
  }

  .speed-title > div > p:nth-child(2) {
    right: -1rem;
  }

  .speed-title > div {
    font-size: .16rem;
    width: .9rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FF7611;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  .line {
    width: 3.08rem;
    height: .08rem;
    border-radius: .04rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 0 auto;
    position: relative;
  }

  .line > p {
    width: .2rem;
    height: .2rem;
    border-radius: 100%;
    color: #ffffff;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: .2rem;
    text-align: center;
    background-color: #F86E64;
    position: absolute;
  }

  .line-left {
    height: 100%;
    width: 1.45rem;
    background: linear-gradient(-90deg, rgba(248, 110, 100, 1), rgba(250, 176, 101, 1));
    box-shadow: 0 .03rem .09rem 0 rgba(255, 126, 69, 0.33);
  }

  .line-right {
    height: 100%;
    width: calc(100% - 1.45rem);
    background-color: #FDD0D8;
  }

  .ms {
    width: .5rem;
    color: #999999;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    height: .35rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: -.45rem;
  }

  footer {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
  }

  .foot_2, .foot_3 {
    height: 100%;
    width: 50%;
    line-height: .5rem;
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .foot_1 {
    width: calc(100% - 2.7rem);
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .foot_2 {
    background-color: #FFBF25;
  }

  .foot_3 {
    background-color: #FF7611;
  }

  .foot_1 {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .foot_1 > div {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 50%;
    height: 100%;
    align-items: center;
  }

  .foot_1 > div > span {
    color: #999999;
    font-size: .1rem;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .foot_1 > div > img {
    width: .21rem;
    height: .21rem;
    margin-bottom: .02rem;
  }


  .fktit {
    height: .5rem;
    line-height: .5rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #282828;
  }
  .fkitem {
    margin-bottom: .1rem;
  }
  .fkitem>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #242424;
    margin-bottom: .1rem;
  }
  .fkitem>div {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    /*justify-content: space-between;*/
  }
  .fkitem>div>p:nth-child(2) {
    margin: 0 .2rem;
  }
  .fkitem>div>p {
    width:.8rem;
    height:.36rem;
    background:rgba(241,241,241,1);
    border:.01rem solid #F1F1F1;
    border-radius:.07rem;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
    text-align: center;
    line-height: .36rem;
  }
  .yxguige {
    height: .4rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FAFAFA;
  }
  .yxguige>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .yxguige>p:nth-child(2) {
    color: #333333;
  }
  .guifoot {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .guifoot>p:nth-child(1) {
    font-size:.24rem;
    font-family:San Francisco Display;
    font-weight:500;
    color: #FF433C;
  }
  .guifoot>p:nth-child(1)>span {
    font-size: .16rem;
  }
  .guifoot>p:nth-child(2) {
    width:1.08rem;
    height:.35rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    border-radius:.17rem;
    line-height: .35rem;
    text-align: center;
    color: #ffffff;
    font-size:.15rem;
    font-family:Adobe Heiti Std;
    font-weight:normal;
  }
  .closeGuiGe {
    width: .38rem;
    height: .38rem;
    position: absolute;
    left: calc(50% - .19rem);
    bottom: -.52rem;
  }
  .selected {
    background:rgba(255,239,220,1) !important;
    border:.01rem solid rgba(255,118,17,1) !important;
    color: #FF7611 !important;
  }

  /* 弹出框 */
  >>> .van-action-sheet__description {
    padding: .16rem;
    color: #333333;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    line-height: .2rem;
  }
  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .18rem;
    line-height: .5rem;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: .2rem;
  }
  >>> .van-popup {
    min-height: 2rem;
  }
  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }
  >>> .van-action-sheet__item {
    height: .5rem;
  }
  >>> .fkPopup{
    transform: translate3d(0,0,0);
    top: 15% !important;
    left: calc(50% - 1.65rem) !important;
  }

  .commentWrap {
    background-color: #FFFFFF;
    padding: 0 .15rem;
    margin-bottom: .1rem;
  }
  .comment-tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-tit>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-tit>div>p:nth-child(1) {
    width:.04rem;
    height:.17rem;
    background:rgba(255,149,71,1);
    border-radius: .02rem;
    margin-right: .1rem;
  }
  .comment-tit>div>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #232323;
  }
  .comment-tit>p>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-tit>p>img {
    width: .06rem;
    height: .11rem;
    margin-left: .08rem;
  }

  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .15rem;
  }

  .comment-box-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-img>img {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    margin-right: .13rem;
  }
  .comment-box-name {
    height: .35rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-name>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #4E4E4E;
  }
  .comment-box-name>.star {
    margin: 0;
  }
  .comment-box-time {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-time>p {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-info {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(98,98,98,1);
    line-height:.2rem;
    margin: .15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .comment-img {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .comment-img>img {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .05rem;
    margin-bottom: .05rem;
  }
  .comment-box-icon {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-icon>p:nth-child(1) {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-icon>div>p {
    padding: 0 .1rem;
    height:.22rem;
    background:rgba(255,255,255,1);
    border:.01rem solid rgba(204, 204, 204, 1);
    border-radius:.11rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-left: .1rem;
  }
  .comment-box-icon>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-icon>div>p>span {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .comment-box-icon>div>p>img {
    width: .13rem;
    height: .13rem;
    margin-right: .05rem;
  }

  /* 评分适配 */
  >>> .van-rate__icon {
    font-size: .1rem;
  }
  >>> .van-rate__item:not(:last-child) {
    padding-right: .04rem;
  }

/* 宝贝详情 */
  .details {
    background-color: #FFFFFF;
  }
  .details>div:nth-child(1) {
    width: .6rem;
    margin: 0 auto;
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    position: relative;
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .details>div:nth-child(1):before{
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    left:-.55rem;
  }
  .details>div:nth-child(1):after {
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    right: -.55rem;
  }

  .detailsInfo{
    text-align: center;
  }
  .detailsInfo>p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    height: .3rem;
    line-height: .3rem;
  }



  .fkNum {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .fkNum>p {
    margin: 0 !important;
  }

  .fkitem > p,.fkNum>p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #242424;
    margin-bottom: .1rem;
  }


  .fkbox {
    width: 3.26rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .1rem .2rem;
    position: relative;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
  /* 加减数量适配 */
  >>> .van-stepper__minus,>>> .van-stepper__plus {
    width: .22rem !important;
    height: .22rem !important;
    border-radius: .04rem 0 0 .04rem;
    padding: .04rem;
  }
  >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__minus::after {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__plus::after {
    width: .01rem;
    height: .13rem;
  }
  >>> .van-stepper__input {
    border-width: .01rem 0;
    margin: 0 .02rem;
    font-size: .14rem;
    width: .32rem;
    height: .22rem !important;
  }
</style>
